<template>
  <div class="formMake">
    <!-- 需要设置编辑区域高度 -->
    <fm-making-form style="height: 700px;" preview generate-code generate-json getjson>
      <template slot="action"></template>
    </fm-making-form>
    <!-- 通过表单设计器的JSON，渲染表单，获取表单数据 -->
    <!-- <fm-generate-form :data="jsonData" :remote="remoteFuncs" :value="values" ref="generateForm"></fm-generate-form> -->
  </div>
</template>

<script>
import Vue from 'vue'

import { GenerateForm, MakingForm } from 'form-making'
import 'form-making/dist/FormMaking.css'
import 'form-making/public/lib/ace/src-min-noconflict/ace.js'
Vue.component(GenerateForm.name, GenerateForm)
Vue.component(MakingForm.name, MakingForm)

export default {
  data() {
    return {
      jsonData: {"list":[{"type":"grid","name":"栅格布局","icon":"icon-grid-","columns":[{"span":12,"list":[]},{"span":12,"list":[{"type":"select","name":"下拉选择框","icon":"icon-select","options":{"defaultValue":"","multiple":false,"disabled":false,"clearable":false,"placeholder":"","required":false,"showLabel":false,"width":"","options":[{"value":"下拉框1"},{"value":"下拉框2"},{"value":"下拉框3"}],"remote":false,"filterable":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1567143838000_21972"},"key":"1567143838000_21972","model":"select_1567143838000_21972","rules":[]}]}],"options":{"gutter":0,"justify":"start","align":"top","remoteFunc":"func_1567143832000_61885"},"key":"1567143832000_61885","model":"grid_1567143832000_61885","rules":[]},{"type":"input","name":"单行文本","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":true,"dataType":"string","pattern":"","placeholder":"","disabled":false,"remoteFunc":"func_1567144914000_89675"},"key":"1567144914000_89675","model":"input_1567144914000_89675","rules":[{"type":"string","message":"单行文本格式不正确"},{"required":true,"message":"单行文本必须填写"}]},{"type":"rate","name":"评分","icon":"icon-icon-test","options":{"defaultValue":0,"max":5,"disabled":false,"allowHalf":false,"required":false,"remoteFunc":"func_1567144912000_54968"},"key":"1567144912000_54968","model":"rate_1567144912000_54968","rules":[]},{"type":"checkbox","name":"多选框组","icon":"icon-check-box","options":{"inline":false,"defaultValue":[],"showLabel":false,"options":[{"value":"选项1"},{"value":"选项2"},{"value":"选项3"}],"required":true,"width":"","remote":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1567144932000_14348","disabled":true},"key":"1567144932000_14348","model":"checkbox_1567144932000_14348","rules":[{"required":true,"message":"多选框组必须填写"}]},{"type":"number","name":"计数器","icon":"icon-number","options":{"width":"","required":false,"defaultValue":0,"min":0,"max":0,"step":1,"disabled":false,"controlsPosition":"","remoteFunc":"func_1567144933000_53085"},"key":"1567144933000_53085","model":"number_1567144933000_53085","rules":[]},{"type":"switch","name":"开关","icon":"icon-switch","options":{"defaultValue":false,"required":false,"disabled":false,"remoteFunc":"func_1567144945000_96006"},"key":"1567144945000_96006","model":"switch_1567144945000_96006","rules":[]},{"type":"editor","name":"编辑器","icon":"icon-fuwenbenkuang","options":{"defaultValue":"","width":"","remoteFunc":"func_1567144947000_44227"},"key":"1567144947000_44227","model":"editor_1567144947000_44227","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small"}},
      values: {},
      remoteFuncs: {},
    }
  },
  methods: {
    /**获取设计器json数据**/
    getjson() {
      // return this.$refs.makingform.getJSON()
      console.log(this.$refs.makingform.getJSON() );

      // return this.jsonData = this.$refs.makingform.getJSON()
    }
  }
}
</script>

<style lang="scss" scoped>
.formMake {
  padding: 20px;
}
</style>